<template>
    <div class="contain">
        <h3 style="text-align: center">修改个人信息</h3>
        <el-form ref="form" :model="form" label-width="80px" class="info">
            <el-form-item label="用户id">
                <el-input v-model="form.uid" disabled></el-input>
            </el-form-item>
            <el-form-item label="姓名">
                <el-input v-model="form.name" disabled></el-input>
            </el-form-item>
            <el-form-item label="年龄">
                <el-input v-model="form.age"></el-input>
            </el-form-item>
            <el-form-item label="电话">
                <el-input v-model="form.tel"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSubmit">修改</el-button>
                <el-button type="info" @click="returnPage">返回</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
    export default {
        inject:['reload'],
        created() {
            this.find();
        },
        data() {
            return {
                form: {
                    name: '',
                    age:'',
                    tel:'',
                    uid:''
                }
            }
        },
        methods: {
          async  find() {
               const {data:res}=await this.$http.post("userInfo/find");
               this.form=res.data.info;
            },
           async onSubmit(){
                const {data:res}=await this.$http.post("userInfo/update",this.form);
                if(res.code===20000){
                    this.$message.success("更新成功");
                    this.$router.push("/welcome")
                }
            },
            returnPage() {
                // 跳转上一级
                // 这个判断用来解决这种情况，当用户没有上一条路由的历史记录，
                // 出现点击返回按钮没有反应时，下面的代码用来判断有没有上一条路由的历史记录   如果没有则返回首页
                if (window.history.length <= 1) {
                    this.$router.push({ path: "/welcome" });
                    return false;
                } else {
                    this.$router.go(-1);
                }
            }
        },

    }
</script>

<style scoped lang="less">
    .container{
        background: url("../assets/img/b0.jpg") center center no-repeat;
    }
</style>
